<template>
  <view :class="['h-upload-wrap', center ? 'h-upload-center' : '']">
    <view :class='["h-upload-item", defaultUrl ? "h-upload-item-none" : ""]' v-for="(item, index) in fileList" :style="{width: width, height: height}" @tap="handleUpload(index)">
      <view class="h-upload-btn" v-if="item?.file && !defaultUrl">
        <view class="h-upload-bar"></view>
        <view class="h-upload-bar"></view>
      </view>
      <image class="h-upload-item-img" v-else-if="defaultUrl" :src="defaultUrl"/>
      <view class="h-upload-item-img-wrap" v-else-if="item.status == 1">
        <view class="h-upload-item-close" @tap="handleDel(item, index)">X</view>
        <image class="h-upload-item-img" :src="item?.file"/>
      </view>
    </view>
    <h-toast></h-toast>
  </view>
</template>

<script>
import Taro from "@tarojs/taro";
import hToast from "../hToast/index.vue";

export default {
  name: "hUpload",
  props: {
    fileList: {
      type: Array,
      default: () => {
        return []
      }
    },
    width: {
      type: [Number, String],
      default: 140
    },
    height: {
      type: [Number, String],
      default: 140
    },
    center: {
      type: Boolean,
      default: false
    },
    defaultUrl: {
      type: String,
      default: ''
    },
    maxCount: {
      type: Number,
      default: 1
    }
  },
  methods: {
    uploadFilePromise(url) {
      return new Promise((resolve, reject) => {
        Taro.getFileSystemManager().readFile({
          filePath: url,
          encoding: 'base64',
          success: (data) => {
            let str = data.data;
            resolve(str)
          },
          fail: (err) => {
            Taro.hToast({
              message: JSON.stringify(err),
            });
          }
        });
      })
    },
    handleUpload(index) {
      let arr = this.fileList.filter(item => item.file)
      if(arr.length >= this.maxCount) {
        Taro.hToast({
          message: '最多允许上传'+this.maxCount+'图片',
        });
        console.log(arr)
        return
      }
      Taro.chooseImage({
        count: this.maxCount - arr.length,
        sizeType: ['original', 'compressed'],
        sourceType: ['album', 'camera'],
        success: async (res) => {
          let file = await this.uploadFilePromise(res.tempFilePaths[0])
          if (file) {
            // 更换图像
            this.$emit('afterRead', {file, index})
          }
        }
      })
    },

    handleDel(data, index) {
      this.$emit('delete', {file: data?.file || '', index})
    }
  },
  components: {
    hToast
  }
}
</script>

<style>
.h-upload-wrap {
  width: 100%;
  min-height: 100rpx;
  height: auto;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  flex-wrap: wrap;
}
.h-upload-center {
  justify-content: center;
}
.h-upload-item {
  width: 140rpx;
  height: 140rpx;
  border: 1PX #d6e4ef solid;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-right: 10rpx;
  position: relative;
}
.h-upload-item-none {
  border: none;
}
.h-upload-bar {
  position: absolute;
  top: 50%;
  left: 50%;
  display: inline-block;
  width: 52rpx;
  height: 2PX;
  border-radius: 1PX;
  background-color: #ccc;
}
.h-upload-bar:nth-child(1) {
  transform: translate3d(-50%,-50%,0) rotate(90deg)
}
.h-upload-bar:nth-child(2) {
  transform: translate3d(-50%,-50%,0) rotate(0)
}
.h-upload-item-img-wrap {
  position: relative;
  width: 100%;
  height: 100%;
}
.h-upload-item-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.h-upload-item-close {
  position: absolute;
  top: -20rpx;
  right: -20rpx;
  font-size: 28rpx;
  color: #fff;
  border-radius: 50%;
  background-color: #d5ad57;
  width: 40rpx;
  height: 40rpx;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  z-index: 9999;
}
</style>
